<template>
	<div class="dashboardBox">
		<!-- 底板 -->
		<div class="dtfloor" @click="panelBool_change" v-if="panelBool"></div>
		<span @click="panelBool = true" class="link-none panel-btn">
			<span>
				{{overviewItem ? overviewItem.overviewName : '暂无概览'}}
			</span>
<!--			<i :class="panelBool == true ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>-->
			<i class="el-icon-caret-bottom" :style="{transform: panelBool == true ? 'rotate(-180deg)' : 'rotate(0)'}"></i>
		</span>
		<div class="panel" v-show="panelBool">
			<div class="leftP">
				<div
					@click="jumpAnchor(_i)"
					:class="
            typeActiveItem.value == _i.value
              ? 'anchor-point anchorPoint_active flex_btw'
              : 'anchor-point flex_btw'
          "
					class="anchorPoint flex_btw"
					v-for="_i in typeList"
					:key="_i.value"
				>
					<span></span>
					<span>{{ _i.label }}</span>
				</div>
			</div>
			<div class="rightP">
				<grid-tree :overviewInfo="typeActiveItem" @handlePanelBool="panelBool_change"></grid-tree>
				<!--<header class="search">
					<el-input v-model="searchQuery" placeholder="请输入内容" size="mini" class="searchInput">
						<el-button @click="filter_arr" slot="append" icon="el-icon-search"></el-button>
					</el-input>
					<el-button type="primary" size="mini" class="addBtn">新建</el-button>
				</header>
				<section>
					<div class="secItem data-grid-content">
						<div class="sub-title">
							<i></i>
							<span>{{typeActiveItem.label}}</span>
						</div>
						<div class="group-list">
							<div class="group-item" v-for="item in typeActiveItem.list" :key="item.id">
								<div class="title clearfix">
									<div class="name" @click="handleExpand($event, item)">
										<i class="el-icon-arrow-right"></i>
										{{item.name}}
									</div>
									<div class="action-icon">
										<i class="el-icon-edit" @click="handleRename(item)"></i>
										<i class="el-icon-close"></i>
									</div>
								</div>
								<el-collapse-transition>
									<ul class="list-con" v-show="item.show">
										<li class="list-item clearfix" v-for="child in item.children" :key="child.id">
											<div class="name">{{child.name}}</div>
											<div class="action-icon">
												<i class="el-icon-edit"></i>
												<i class="el-icon-close"></i>
											</div>
										</li>
										<li>概览02</li>
									</ul>
								</el-collapse-transition>
							</div>
						</div>
					</div>
				</section>-->
			</div>
		</div>
	</div>
</template>

<script>
	import gridTree from "../gridTree";
  export default {
    name: "gridMenu",
		data() {
    	return {
    		typeList: [
					{
						value: 0,
						label: "公共概览",
					},
					{
						value: 1,
						label: "个人概览",
					}
				],
				typeActiveItem: {},   // active
				panelBool: false,     // 是否显示
			}
		},
		components: {
    	gridTree
		},
		created() {
    	this.typeActiveItem = this.typeList ? this.typeList[0] : {};
		},
		props: {
		},
		computed: {
			overviewItem() {
    		return this.$store.state.global.overviewItem;
			}
		},
		watch: {
			overviewItem: {
				handler(val) {
					console.log(val, "overviewItem");
				},
				immediate: true
			}
		},
		methods: {
    	// 左侧切换
			jumpAnchor(item) {
				this.typeActiveItem = item;
			},
			// 展开子项
			handleExpand(e, item) {
				e.preventDefault();
				let dom = e.target || e.srcElement;
				let iconDom = dom.querySelector('.el-icon-arrow-right');
				console.log(iconDom, "iconDom")
				let _icon = dom;
				if (iconDom) {
					_icon = iconDom;
				}
				console.log(_icon, "icon")
				let _className = _icon.className;
				if (_className.indexOf("icon-rotate") > -1) {
					_icon.classList.remove("icon-rotate");
					item.show = false;
				} else {
					_icon.classList.add("icon-rotate");
					item.show = true;
				}
			},
			panelBool_change() {
				this.panelBool = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.dashboardBox {
		position: relative;
		.panel-btn {
			font-size: 20px;
			font-weight: 500;
			i {
				-webkit-transition: all 0.2s ease;
				-moz-transition: all 0.2s ease;
				-ms-transition: all 0.2s ease;
				-o-transition: all 0.2s ease;
				transition: all 0.2s ease;
			}
		}
	}
	.panel {
		position: absolute;
		left: 0;
		top: 0.5rem;
		width: 9rem;
		height: 7rem;
		z-index: 12;
		transition: all ease 0.5s;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: #fff;
		.rightP {
			color: #475669;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: calc(7rem);
			font-size: 14px;
			border-left: 0.01rem solid rgba($color: #909399, $alpha: 0.2);
			padding: 0.05rem;
			header {
				height: 0.5rem;
				line-height: 0.5rem;
				.searchInput {
					width: 80%;
					margin-right: 0.1rem;
				}
			}
			section::-webkit-scrollbar {
				display: none;
			}
			section {
				height: 6rem;
				overflow-y: scroll;
				scrollbar-width: none; /*Firefox*/
				-ms-overflow-style: none;
				.secItem {
					.sub-title {
						font-weight: 500;
						text-indent: 0.2rem;
						color: #475669;
						position: relative;
						padding-left: 0.1rem;
						i {
							position: absolute;
							display: inline-block;
							background: rgba($color: #01b27a, $alpha: 0.8);
							width: 0.06rem;
							height: 40%;
							top: 30%;
							left: 0.1rem;
						}
					}
					.group-list {
						line-height: .5rem;
						padding: 0 0 0.2rem 0.2rem;
						.group-item {
							.title, .list-item {
								/*display: flex;*/
								/*justify-content: space-between;*/
								.name {
									max-width: 80%;
									float: left;
									white-space: nowrap;
									overflow: hidden;
									-ms-text-overflow: ellipsis;
									text-overflow: ellipsis;
								}
								i {
									padding: .05rem;
									cursor: pointer;
									margin-left: .05rem;
									transition: all ease 0.5s;
									&.icon-rotate {
										-webkit-transform: rotate(90deg);
										-moz-transform: rotate(90deg);
										-ms-transform: rotate(90deg);
										-o-transform: rotate(90deg);
										transform: rotate(90deg);
									}
								}
								.action-icon {
									float: right;
									opacity: 0;
									i {
										color: #01b27a;
									}
								}
								&:hover {
									background: rgba($color: #e4e7ed, $alpha: 0.4);
									.action-icon {
										opacity: 1;
									}
								}
							}
							.title {
								color: #797a7b;
								font-weight: 400;
							}
							ul.list-con {
								padding-left: .2rem;
								transition: all 0.5s ease;
								li {
									padding-left: .5rem;
								}
							}
						}
						span {
							/*width: calc(50% - 0.2rem);
							height: 0.5rem;
							margin: 0 0.1rem;
							line-height: 0.5rem;
							text-align: left;
							text-indent: 0.2rem;
							display: inline-block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 0.12rem;
							border-radius: 4px;*/
							.more {
								/*position: absolute;
								width: 4rem;
								top: 0;
								right: -4.1rem;
								opacity: 0;
								padding: 0.1rem 0.1rem;
								border-radius: 0.1rem;
								transition: all 0.5s ease;
								box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
								border: 1px solid #ebeef5;
								background-color: #fff;
								div:nth-child(1) {
									width: 100%;
									height: 0.4rem;
									font-size: 0.24rem;
									font-weight: bold;
									line-height: 0.4rem;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
								div:nth-child(2) {
									width: 100%;
									text-indent: 0.3rem;
									padding: 0.1rem 0 0.2rem;
									font-size: 0.1rem;
									line-height: 0.3rem;
								}
								div:nth-child(3) {
									width: 100%;
									height: 0.4rem;
									font-size: 0.1rem;
									border-top: 1px solid rgba($color: #e4e7ed, $alpha: 0.8);
									line-height: 0.4rem;
								}*/
							}
						}
						.active_item {
							color: white;
							font-weight: 500;
							background: rgba($color: #01b27a, $alpha: 0.6) !important;
						}
					}
				}
			}
		}
		.leftP {
			&::-webkit-scrollbar {
				display: none;
			}

			width: 2rem;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			overflow-y: scroll;
			padding: 0.05rem;
			.anchorPoint {
				display: flex;
				align-items: center;
				width: 100%;
				height: 0.6rem;
				margin: 0 0 0.1rem 0;
				span {
					display: inline-block;
					height: 0.6rem;
					line-height: 0.6rem;
					cursor: pointer;
				}
				span:nth-child(1) {
					border-left: 0.06rem solid rgba($color: #01b27a, $alpha: 0);
					/*height: 0.3rem;*/
				}
				span:nth-child(2) {
					text-indent: 0.2rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					flex: 1;
					font-size: 0.24rem;
				}
				span:nth-child(3) {
					width: 0.4rem;
					height: 0.3rem;
					transform: scale(0.9, 0.8);
					margin-right: 0.06rem;
					line-height: 0.3rem;
					font-size: 0.1rem;
					text-align: center;
					background: rgba($color: #e4e7ed, $alpha: 0.8);
					border-radius: 0.2rem;
					font-weight: 500;
					color: #909399;
				}
			}
			.anchorPoint:hover {
				background: rgba($color: #e4e7ed, $alpha: 0.3);
			}
			.anchorPoint_active {
				background: rgba($color: #04cb94, $alpha: 0.06) !important;
				span:nth-child(1) {
					border-left: 0.06rem solid rgba($color: #01b27a, $alpha: 0.8);
				}
				span:nth-child(2) {
				}
				span:nth-child(3) {
					font-weight: 500;
					background: rgba($color: #04cb94, $alpha: 0.8);
					color: white;
				}
			}
		}
	}
	.dtfloor {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 11;
		background: rgba(1, 178, 122, 0);
	}

</style>
